<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>MCU Manager</title>
	<%@ include file="/WEB-INF/jsp/common/cssjs2.jsp" %>
	
	<script type="text/javascript">
		$(function(){
			$('.easyui-validatebox').validatebox();
			$('.easyui-validatebox[required]').after("<font color='red'> *</font>");
			
			$("#id_bandwidth").val('${model.bandwidth}');
			loadGroup();
		});
		
		function doSubmit(){
			$('#id_form').form('submit', {
		        url:"<c:url value='/app/manage/participant'/>",
		        onSubmit: function(){
		        	if($('.easyui-validatebox').validatebox("isValid")==false){
		        		return false;
		        	}else if(isExist()){
		        		alert(messages.getMsg("error.exist",[$("#id_number").val()]));
		        		return false;
		        	}else{
						return true;
					}
		        },
		        success:function(data){
					if("<fmt:message key="operation.success"/>" != data)
						alert(data);
					parent.ptcObj.reload();
					parent.closeWin();
		        }
			});
		}
		
		function isExist(){
			var ret=false;
			var _key=$("#id_number").val();
			var _preKey="<c:out value='${model.number}'/>";
			
			if("${param.opt}"=="modify"&&_key==_preKey){//whether is the same key in the modify page
				ret=false;
			}else{
				$.ajax({
					url:"<c:url value='/app/manage/participant/check'/>",
					async:false,
					type:"GET",
					data:{
						key:$("#id_number").val(),
						times:new Date().toString()
					},
					success:function(data){
						if(data=="true")
							ret=true;
					}
				});
			}
			
			return ret;
		}
		
		function loadGroup(){
			$.ajax({
				url:"<c:url value='/app/manage/group/combox'/>",
				type:"GET",
				data:{
					times:new Date().valueOf()
				},
				success:function(data){
					var groups=eval(data);
					$.each(groups,function(){
						$("#id_group").append("<option value='"+this.name+"'>"+this.name+"</option>");
					});
					
					setTimeout(function(){
						$("#id_group").val("${model.group}");
					},100);
				}
			});
		}
	</script>
	
	<style type="text/css">
	    html, body {
	        width: 100%;
	        height: 100%;
	        margin: 0px;
	        overflow: hidden;
	    }
	</style>
</head>
<body class="dialog">
	<div class="table-container">
		<div style="height:20px;"></div>
		<form id="id_form" method="post">
		<c:if test="${param.opt=='modify'}">
			<input type="hidden" value="PUT" name="_method">
		</c:if>
		<table>
			<tr>
				<td><fmt:message key='form.participant.group'/></td>
				<td>
					<select id="id_group" name="group" class="input-text easyui-validatebox" required="true"></select>
				</td>
			</tr>
			<tr>
				<td><fmt:message key='form.participant.number'/></td>
				<td><input id="id_number" type="text" <c:if test="${param.opt=='modify'}">readonly="readonly" style="background-color: #DEDBD6;"</c:if> name="number" value="<c:out value='${model.number}'/>" class="input-text easyui-validatebox" validType="digit" required="true"></td>
			</tr>
			<tr>
				<td><fmt:message key='form.participant.name'/></td>
				<td><input type="text" name="name" value="${model.name}" class="input-text easyui-validatebox"></td>
			</tr>
			<tr>
				<td><fmt:message key='form.participant.password'/></td>
				<td><input type="password" name="password" value="${model.password}" class="input-text easyui-validatebox"></td>
			</tr>
			<tr>
				<td><fmt:message key='form.participant.ip'/></td>
				<td><input type="text" name="ip" value="${model.ip}" validType="ip" class="input-text easyui-validatebox"></td>
			</tr>
			<tr>
				<td><fmt:message key='form.participant.email'/></td>
				<td><input type="text" name="email" value="${model.email}" validType="email" class="input-text easyui-validatebox"></td>
			</tr>
			<tr>
				<td><fmt:message key='form.participant.bandwidth'/></td>
				<td>
					<select id="id_bandwidth" name="bandwidth" class="input-text easyui-validatebox">
						<option value="128">128</option>
                        <option value="192">192</option>
                        <option value="256">256</option>
                        <option value="320">320</option>
                        <option value="384">384</option>
                        <option value="448">448</option>
                        <option value="512">512</option>
                        <option value="576">576</option>
                        <option value="640">640</option>
                        <option value="768">768</option>
                        <option value="1024">1024</option>
                        <option value="1472">1472</option>
						<option value="1920">1920</option>
						<option value="2048">2048</option>
						<option value="2560">2560</option>
						<option value="3072">3072</option>
						<option value="3584">3584</option>
						<option value="4096">4096</option>
					</select>
				</td>
			</tr>
			<tr>
				<td><fmt:message key='form.participant.description'/></td>
				<td><textarea rows="5" name="description" class="input-text"><c:out value='${model.description}'/></textarea></td>
			</tr>
			<tr>
				<td colspan="2">
					<p align="center">
                        <input type="button" onclick="doSubmit();" class="mybtn" value="<fmt:message key='btn.ok'/>">
						<button onclick="parent.closeWin();" class="mybtn"><fmt:message key='btn.cancel'/></button>
					</p>
				</td>
			</tr>
		</table>
		</form>
		<div style="height:20px;"></div>
	</div>
</body>
</html>